<template>
  <div class="admin-dashboard">
    <el-container>
      <el-aside width="200px">
        <div class="admin-logo">
          <h2>教育平台后台管理</h2>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="admin-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="dashboard">
            <el-icon><DataLine /></el-icon>
            <span>数据概览</span>
          </el-menu-item>
          <el-menu-item index="users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="courses">
            <el-icon><Reading /></el-icon>
            <span>课程管理</span>
          </el-menu-item>
          <el-menu-item index="orders">
            <el-icon><List /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="settings">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header>
          <div class="header-content">
            <div class="header-left">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ currentPage }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="header-right">
              <el-dropdown>
                <span class="user-info">
                  <el-avatar :size="32" :src="userAvatar" />
                  <span class="username">{{ userName }}</span>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { DataLine, User, Reading, List, Setting } from '@element-plus/icons-vue'
import { TokenManager } from '@/utils/request'
import { getUserName } from '@/api/user'

export default {
  name: 'AdminDashboard',
  
  components: {
    DataLine,
    User,
    Reading,
    List,
    Setting
  },
  
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    const activeMenu = ref('dashboard')
    const userAvatar = ref('')
    const userName = ref('管理员')
    
    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        const response = await getUserName()
        if (response.code === 200 && response.data) {
          userName.value = response.data.userName
          // 从ossImages中获取头像URL
          const avatarImage = response.data.ossImages?.find(img => img.relationType === 'head')
          if (avatarImage) {
            userAvatar.value = avatarImage.url
          }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    }
    
    // 在组件挂载时获取用户信息
    onMounted(() => {
      fetchUserInfo()
    })
    
    // 计算当前页面名称
    const currentPage = computed(() => {
      const path = route.path
      if (path.includes('dashboard')) return '数据概览'
      if (path.includes('users')) return '用户管理'
      if (path.includes('courses')) return '课程管理'
      if (path.includes('orders')) return '订单管理'
      if (path.includes('settings')) return '系统设置'
      return '首页'
    })
    
    // 处理菜单选择
    const handleMenuSelect = (index) => {
      router.push(`/admin/${index}`)
    }
    
    // 处理退出登录
    const handleLogout = () => {
      TokenManager.clearToken()
      localStorage.removeItem('userRole')
      sessionStorage.removeItem('userRole')
      ElMessage.success('已退出登录')
      router.push('/login')
    }
    
    return {
      activeMenu,
      userAvatar,
      userName,
      currentPage,
      handleMenuSelect,
      handleLogout
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  height: 100vh;
  background-color: #f5f7fa;
}

.admin-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #001529;
  color: white;
}

.admin-logo h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.admin-menu {
  height: calc(100vh - 60px);
  border-right: none;
}

.el-header {
  background-color: white;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.username {
  margin-left: 8px;
  font-size: 14px;
  color: #606266;
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}
</style> 